import 'package:flutter/material.dart';
import 'package:gpt_mobile/provider/chat_provider/provider.dart';
import 'package:provider/provider.dart';

import 'adapter/message_adapter.dart';

class ChatPage extends StatefulWidget {
  const ChatPage({super.key});

  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    // 使用changeNotifierProvider
    return ChangeNotifierProvider(
      create: (ctx) => ChatProvider(),
      builder: (ctx, _) => Scaffold(
        appBar: AppBar(
          title: const Text('Chat with Bot'),
        ),
        body: Column(
          children: <Widget>[
            const MessageList(),
            const Divider(height: 1.0),
            SendMessageBottom()
          ],
        ),
      ),
    );
  }
}

class MessageList extends StatelessWidget {
  const MessageList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ChatProvider provider = Provider.of<ChatProvider>(context);
    return Flexible(
      child: ListView.builder(
          padding: const EdgeInsets.all(8.0),
          reverse: true,
          itemCount: provider.messageDataList.length,
          itemBuilder: (_, int index) => ChatMessage(
                messageData: provider.messageDataList[index],
              )),
    );
  }
}

class SendMessageBottom extends StatelessWidget {
  SendMessageBottom({Key? key}) : super(key: key);

  late ChatProvider chatProvider;

  final TextEditingController _textController = TextEditingController();

  void _handleSubmitted(String text) {
    // 获取全局context
    // 如果text为空则不发送并提示输入内容
    chatProvider.getChatMessage(msg: text);
    _textController.clear();
  }

  @override
  Widget build(BuildContext context) {
    chatProvider = Provider.of<ChatProvider>(context);
    _textController.addListener(() {
      chatProvider.isButtonEnable = _textController.text.isNotEmpty;
    });
    return Container(
      decoration: BoxDecoration(color: Theme.of(context).cardColor),
      child: Row(
        children: <Widget>[
          Flexible(
            child: TextField(
              controller: _textController,
              decoration:
                  const InputDecoration.collapsed(hintText: 'Send a message'),
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 4.0),
            // 圆形发送按钮背景色为主题色，点击时为主题色的半透明，icon 为白色
            decoration: BoxDecoration(
              color: Theme.of(context).primaryColor,
              borderRadius: BorderRadius.circular(30.0),
            ),
            child: IconButton(
              icon: const Icon(Icons.send),
              color: Colors.white,
              onPressed: !chatProvider.isButtonEnable
                  ? null
                  : () {
                      _handleSubmitted(_textController.text);
                    },
            ),
          ),
        ],
      ),
    );
  }
}
